<script setup lang="ts">
  import { ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus'
  import { PropType, ref } from 'vue'
  import { useUpdateEnterpriseNoticeVisibleTypeByIds } from '@/services/pages/enterprise-notice/useEnterpriseNotice'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { updateVisibleTypeLoading, updateVisibleType } =
    useUpdateEnterpriseNoticeVisibleTypeByIds()

  defineOptions({
    name: 'UpdateEnterpriseNoticeVisibleTypeModal',
  })

  const props = defineProps({
    selectIds: {
      type: Array as PropType<Array<string>>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('visible', { type: Boolean, default: false })

  // 表单
  const form = ref<{ visibleType: 1 | 2 | 3 }>({
    visibleType: 1,
  })

  /**
   * 隐藏弹窗
   */
  const hideDialog = () => {
    form.value.visibleType = 1
    visible.value = false
  }

  /**
   * 确定事件
   */
  const onConfirm = async () => {
    const res = await updateVisibleType(props.selectIds, form.value.visibleType)
    if (res.code === 20000) {
      HMessage.success('更新成功')
      hideDialog()
      emits('update')
      return
    }

    HMessageBox.error(res.message)
  }
</script>

<template>
  <h-dialog
    v-model="visible"
    title="修改可见类型"
    :loading="updateVisibleTypeLoading"
    @close="hideDialog"
  >
    <el-form :model="form" label-position="top" inline-message class="modal_form_content">
      <el-form-item label="可见类型">
        <el-select v-model="form.visibleType" placeholder="可见类型">
          <el-option :value="1" label="全部可见"></el-option>
          <el-option :value="2" label="部门可见"></el-option>
          <el-option :value="3" label="公司可见"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss"></style>
